<template>
  <div class="layout-pd">
    <zh-space>
      <zh-card title="" v-if="pageData.showType">
        <zh-form :model="pageData.queryParams" ref="queryFormRef" label-width="160px" :span="8">
          <zh-form-input
						prop="reportTypeName"
						label="报表类型名称"
						placeholder="支持模糊查询"
						v-model="pageData.queryParams.reportTypeName"
					></zh-form-input>
          <zh-form-select prop="status" label="有效状态" :options="pageData.statusDictData" placeholder="请选择" v-model="pageData.queryParams.status"></zh-form-select>
          <template v-if="pageData.advanced">
            <zh-form-input
              prop="reportType"
              label="报表类型编码"
              placeholder="精确查询"
              v-model="pageData.queryParams.reportType"
            ></zh-form-input>
						<zh-form-choose-org prop="orgId" label="所属组织" v-model="pageData.queryParams.orgId"></zh-form-choose-org>
            <zh-form-cascader
              prop="areaCode"
              label="行政区划"
              placeholder="请选择"
              v-model="pageData.queryParams.areaCode"
              :props="{checkStrictly: true,emitPath:false}"
              :options="state.areaCodeSelectTreeData"
            ></zh-form-cascader>
            <zh-form-select
              prop="appId"
              :lazy="true"
              label="所属应用"
              v-model="pageData.queryParams.appId"
              :fieldNames="{ label: 'appName', value: 'appId' }"
              funcCode="application0012"
              searchField="appName"
            ></zh-form-select>
          </template>
          <zh-form-query v-model="pageData.advanced" :tableRef="queryTable" :formRef="queryFormRef"> </zh-form-query>
        </zh-form>
      </zh-card>
      <zh-table title="" type="default" ref="queryTable" size="mini" funcCode="reportType0001" :columns="pageData.tableColumns" highlight-current-row
        :column-config="{resizable: true}"
        :tree-config="{transform: true, rowField: 'reportType', parentField: 'parentId'}"
        :stripe="false"
        :rowConfig="{keyField:'reportType'}">
        <template #header_button>
          <zh-button button-type="add" @click="showAdd()" v-func:reportType0004>新增</zh-button>
        </template>
        <template #flag_default="{ row }">
          <zh-badge :status="statusMap[row.status].status" :text="statusMap[row.status].text" />
        </template>
        <template #operate="{ row }">
          <zh-button v-func:reportType0002 link @click="showdetail(row, true)" style="color: green">查看</zh-button>
          <zh-button v-func:reportType0005 link @click="showdetail(row, false)">修改</zh-button>
       
          <zh-button v-func:reportType0004 link @click="addChildClass(row)">下级新增</zh-button>
          
          <zh-button v-func:reportType0006 link @click="deleteData(row)" style="color: red">删除</zh-button>
        </template>
      </zh-table>
    </zh-space>
    <zh-dialog style="width: 80%" :title="pageData.title" v-model="pageData.detailVisible">
      <reportTypeForm
          ref="menuRef"
          :disabled="pageData.showFlag"
          @canner="canner"
          @refreshTable="refreshTable"
          :reportTypeId="pageData.selectRow.reportTypeId"
      ></reportTypeForm>
      <template #footer>
				<span class="dialog-footer">
					<zh-button @click="pageData.detailVisible = false" type="info">关闭</zh-button>
					<zh-button
              type="primary"
              :loading="pageData.saveLoading"
              :disabled="pageData.saveLoading"
              v-model:btnLoding="pageData.saveLoading"
              @click="save"
          >
						保存
					</zh-button>
				</span>
      </template>
    </zh-dialog>
  </div>
</template>
<script lang="ts" setup name="reportTypeIndex">
import { ElMessageBox, ElMessage } from 'element-plus';
import reportTypeForm from './component/reportTypeForm.vue';

// ------------------接收传入参数(组件)-------------------

// ------------------钩子函数----------------------------
// 初始化
onMounted(() => {
  init();
});

// ------------------定义子组件--------------------------
const queryTable = ref();
const queryFormRef = ref();
const menuRef = ref();

const statusMap = {
  0: {
    status: 'error',
    text: '无效',
  },
  1: {
    status: 'processing',
    text: '有效',
  },
};

// ------------------变量区------------------------------
const pageData = reactive({
  advanced: false,

  tableColumns: [
    {
      type: 'seq',
      minWidth: 60,
      fixed: 'left',
      align: 'center',
      title: '序号',
    },
    {
      field: 'reportTypeId',
      title: '主键',
      visible: false,
      align: 'center',
      minWidth: 80,
    },
    {
      field: 'reportType',
      title: '报表类型编码',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'reportTypeName',
      title: '报表类型名称',
      visible: true,
      align: 'center',
      minWidth: 300,
    },
    { field: 'status', title: '有效状态', align: 'center',  minWidth: 100,slots: {default: 'status_default'}},
    {
      field: 'sourceType',
      title: '来源',
      visible: true,
      align: 'center',
      minWidth: 150,
    },
    {
      field: 'remarks',
      title: '备注说明',
      visible: true,
      align: 'center',
      minWidth: 300,
    },
    {
      field: 'orderNo',
      title: '排序号',
      visible: true,
      align: 'center',
      minWidth: 80,
    },
    {
      field: 'orgName',
      title: '所属单位',
      visible: true,
      align: 'center',
      minWidth: 200,
    },
    {
      field: 'appName',
      title: '所属应用',
      visible: true,
      align: 'center',
      minWidth: 200,
    },
  
    {
      field: 'areaName',
      title: '行政区划名称',
      visible: true,
      align: 'center',
      minWidth: 100,
    },
    
    {
      field: 'operate',
      title: '操作',
      fixed: 'right',
      align: 'center',
      minWidth: 210,
      slots: {
        // 使用插槽模板渲染
        default: 'operate',
      },
    },
  ],
  queryParams: {} as any,
  dictData: {} as any,
  title: '',
  detailVisible: false,
  showFlag: false,
  selectRow: {} as any,
  saveLoading: false,
  showType: true,
  campusParam: {} as any,
});
// ------------------方法区------------------------------
const init = () => {
  refreshTable();
};


//使用子组件方法，关闭弹窗
const canner = (e: any) => {
  pageData.detailVisible = e;
};

const showAdd = () => {
  pageData.title = '新增报名分类';
  pageData.detailVisible = true;
  pageData.showFlag = false;
  pageData.selectRow = {};
};
const addChildClass=(row)=>{
  pageData.modalTitle = '新增报名分类';
	pageData.detailVisible = true;
  let params={parentId:row.reportType}
  pageData.selectRow=params
  pageData.showFlag=false;
}
const showdetail = (row, flag) => {
  if (!flag) {
    pageData.title = '信息修改';
  } else {
    pageData.title = '查看详情';
  }
  pageData.selectRow = row;
  pageData.showFlag = flag;
  pageData.detailVisible = true;
};
//保存
const save = () => {
  menuRef.value.save();
};

//刷新
const refreshTable = () => {
  queryTable.value.refresh(pageData.queryParams);
};
//删除
const deleteData = (row) => {
  ElMessageBox.confirm('是否确认删除？').then(() => {
    let params = {} as any;
    params.reportTypeId = row.reportTypeId;
    $api.common.send.post('reportType0006', params).then(() => {
      ElMessage.success('删除成功');
      refreshTable();
    });
  });
};

</script>
<style lang="scss" scoped></style>
